<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      :visible.sync="showDialog"
      @open="onOpen"
      @close="onClose"
      title="添加用户"
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="80px"
        >
          <el-col :span="24">
            <!-- 用户头像 -->
            <el-form-item label="用户头像">
              <!-- 头衔缩略图 -->
              <pan-thumb :image="image" />
              <!-- 文件上传按钮 -->
              <el-button
                type="primary"
                icon="el-icon-upload"
                @click="imagecropperShow = true"
                >更换头像
              </el-button>

              <!--
                v-show：是否显示上传组件
                :key：类似于id，如果一个页面多个图片上传控件，可以做区分
                :url：后台上传的url地址
                @close：关闭上传组件
                @crop-upload-success：上传成功后的回调 -->
              <!-- 上传组件的这个上传逻辑不是由我们自己写代码完成的 -->
              <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="'/uploadImgFile'"
                field="file"
                @close="closeImage"
                @crop-upload-success="cropSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="formData.username"
                placeholder="请输入用户名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input
                v-model="formData.nickname"
                placeholder="请输入昵称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请输入密码"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phoneNumber">
              <el-input
                v-model="formData.phoneNumber"
                placeholder="请输入手机"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentId">
              <el-select
                v-model="formData.departmentId"
                placeholder="请选择部门"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in departmentList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio
                  v-for="(item, index) in sexOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请输入邮箱"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birth">
              <el-date-picker
                v-model="formData.birth"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择生日"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ImageCropper from "@/components/ImageCropper/index.vue";
import PanThumb from "@/components/PanThumb/index.vue";
import { deleteAvater } from "@/api/user.js";
export default {
  name: "UserAdd",
  components: { ImageCropper, PanThumb },
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    // 子组件中定义props属性去接收父组件传递的参数
    departmentList: {
      type: Array,
    },
  },
  data() {
    return {
      formData: {
        field101: null,
        username: undefined,
        departmentId: undefined,
        nickname: undefined,
        sex: 1,
        password: undefined,
        email: undefined,
        phoneNumber: undefined,
        birth: "2020-09-09",
      },
      // 控制弹出框显示隐藏
      showDialog: false,
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0, // 上传组件id
      image: "https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191",
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        departmentId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        phoneNumber: [
          {
            required: true,
            message: "请输入手机",
            trigger: "blur",
          },
        ],
        birth: [
          {
            required: true,
            message: "请选择生日",
            trigger: "change",
          },
        ],
      },
      field101Action: "https://jsonplaceholder.typicode.com/posts/",
      field101fileList: [],
      departmentIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      sexOptions: [
        {
          label: "帅哥",
          value: 1,
        },
        {
          label: "美女",
          value: 2,
        },
      ],
    };
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
      this.$emit("changeShow", "false");
    },
    close() {
      this.$emit("changeShow", "false");
    },
    handelConfirm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.close();
      });
    },
    field101BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    // 上传成功后的回调函数
    cropSuccess(data) {
      console.log(data);
      var oldImage = this.image;
      //关闭上传组件
      this.imagecropperShow = false;
      //上传成功之后,需要重新给image赋值
      this.image = data.url;
      //判断是否存在之前的头像,否则看业务需求进行是否重新删除
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1;
      this.deleteAvatar(oldImage);
    },

    // 关闭上传组件
    closeImage() {
      this.imagecropperShow = false;
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1;
    },

    //删除上传之前的图片
    async deleteAvatar(oldImage) {
      const { data } = await deleteAvater(oldImage);
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
